<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="范围" prop="trivalentInfluenzaEstimatedTransactionAmount">
        <el-select v-model="queryParams.range" placeholder="请选择范围"  >
          <el-option
            v-for="dict in dict.type.zxcrm_permission_range"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关注" prop="trivalentInfluenzaEstimatedTransactionAmount">
        <el-select v-model="queryParams.attention" placeholder="请选择关注" >
          <el-option
            v-for="dict in dict.type.zxcrm_attention"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商机类型" prop="trivalentInfluenzaEstimatedTransactionAmount">
        <el-select v-model="queryParams.businessOppportunityType"
          placeholder="请选择商机类型" class="w100"
          @change="handleBusinessOppportunityType"
          @keyup.enter.native="handleQuery">
          <el-option
            v-for="dict in dict.type.zxcrm_business_opportunity_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="销售流程" prop="salesProcess">
        <el-select v-model="queryParams.salesProcess" placeholder="请选择销售流程" class="w100" >
          <el-option
            v-for="dict in dict.type.zxcrm_sales_process"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商机阶段" prop="stage">
        <el-select v-model="stageList" multiple placeholder="请选择商机阶段" class="w100" @change="handleStageChange">
          <el-option
            v-for="dict in dict.type.zxcrm_business_opportunity_stage"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="创建时间" prop="create" >
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            @change="hanleCreateChange"
          ></el-date-picker>
      </el-form-item>

      <el-form-item label="阶段变更时间" label-width="100px" prop="create" >
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            @change="hanleCreateChange"
          ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['zxcrm:businessOpportunity:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['zxcrm:businessOpportunity:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['zxcrm:businessOpportunity:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['zxcrm:businessOpportunity:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="businessOpportunityList" @selection-change="handleSelectionChange" @row-click="handleRowClick">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column label="商机名称(本人-客户名称-产品名字-日期)" align="center" min-width="150px" prop="bussinessOpportunity" fixed="left" />
      <el-table-column label="商机阶段" align="center" prop="stage" fixed >
        <template slot-scope="scope" style="display: flex;justify-content: center;">
          <div style="display: flex;align-items:center;">
            <i class="el-icon-circle-close" style="color: red;" v-if="scope.row.stage == '14'"/>
            <i class="el-icon-circle-check" style="color: green;" v-if="scope.row.stage == '13'"/>
            <dict-tag :options="dict.type.zxcrm_business_opportunity_stage" :value="scope.row.stage"/>
          </div>
          <!-- <el-progress :percentage="50" v-if="!(scope.row.stage == '14' || scope.row.stage == '13')"></el-progress> -->
        </template>
      </el-table-column>
      <el-table-column label="所属客户" align="center" prop="companyName" />
      <el-table-column label="销售流程" align="center" prop="salesProcess" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.zxcrm_sales_process" :value="scope.row.salesProcess"/>
        </template>
      </el-table-column>
      <el-table-column label="商机类型" align="center" prop="businessOppportunityType" min-width="120px">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.zxcrm_business_opportunity_type" :value="scope.row.businessOppportunityType"/>
        </template>
      </el-table-column>
      <el-table-column label="流感（三价）-预计成交数量" align="center" prop="trivalentInfluenzaEstimatedTransactionQuantity" />
      <el-table-column label="流感（三价）-预计成交金额（元）" align="center" prop="trivalentInfluenzaEstimatedTransactionAmount" />
      <el-table-column label="流感（三价）-实际成交数量" align="center" prop="trivalentInfluenzaActualTransactionQuantity" />
      <el-table-column label="流感（三价）-实际成交金额（元" align="center" prop="trivalentInfluenzaActualTransactionAmount" />
      <el-table-column label="流感（四价）-预计成交数量" align="center" prop="quadrivalentInfluenzaEstimatedTransactionQuantity" />
      <el-table-column label="流感（四价）-预计成交金额（元）" align="center" prop="quadrivalentInfluenzaEstimatedTransactionAmount" />
      <el-table-column label="流感（四价）-实际成交数量" align="center" prop="quadrivalentInfluenzaActualTransactionQuantity" />
      <el-table-column label="流感（四价）-实际成交金额（元）" align="center" prop="quadrivalentInfluenzaActualTransactionAmount" />
      <el-table-column label="水痘（预充）-预计成交数量" align="center" prop="prefilledChickenpoxEstimatedTransactionQuantity" />
      <el-table-column label="水痘（预充）-预计成交金额（元）" align="center" prop="prefilledChickenpoxEstimatedTransactionAmount" />
      <el-table-column label="水痘（预充）-实际成交数量" align="center" prop="prefilledChickenpoxActualTransactionQuantity" />
      <el-table-column label="水痘（预充）-实际成交金额（元）" align="center" prop="prefilledChickenpoxActualTransactionAmount" />
      <el-table-column label="水痘（西林）-预计成交数量" align="center" prop="penicillinChickenpoxEstimatedTransactionQuantity" />
      <el-table-column label="水痘（西林）-预计成交金额（元）" align="center" prop="penicillinChickenpoxEstimatedTransactionAmount" />
      <el-table-column label="水痘（西林）-实际成交数量" align="center" prop="penicillinChickenpoxActualTransactionQuantity" />
      <el-table-column label="水痘（西林）-实际成交金额（元）" align="center" prop="penicillinChickenpoxActualTransactionAmount" />
      <el-table-column label="肺炎（预充）-预计成交数量" align="center" prop="prefilledPneumoniaEstimatedTransactionQuantity" />
      <el-table-column label="肺炎（预充）-预计成交金额（元）" align="center" prop="prefilledPneumoniaEstimatedTransactionAmount" />
      <el-table-column label="肺炎（预充）-实际成交数量" align="center" prop="prefilledPneumoniaActualTransactionQuantity" />
      <el-table-column label="肺炎（预充）-实际成交金额（元" align="center" prop="prefilledPneumoniaActualTransactionAmount" />
      <el-table-column label="肺炎（西林）-预计成交数量" align="center" prop="penicillinPneumoniaEstimatedTransactionQuantity" />
      <el-table-column label="肺炎（西林）-预计成交金额（元）" align="center" prop="penicillinPneumoniaEstimatedTransactionAmount" />
      <el-table-column label="肺炎（西林）-实际成交数量" align="center" prop="penicillinPneumoniaActualTransactionQuantity" />
      <el-table-column label="肺炎（西林）-实际成交金额（元" align="center" prop="penicillinPneumoniaActualTransactionAmount" />
      <el-table-column label="EV71（预充）-预计成交数量" align="center" prop="prefilledEv71EstimatedTransactionQuantity" />
      <el-table-column label="EV71（预充）-预计成交金额（元）" align="center" prop="prefilledEv71EstimatedTransactionAmount" />
      <el-table-column label="EV71（预充）-实际成交数量" align="center" prop="prefilledEv71ActualTransactionQuantity" />
      <el-table-column label="EV71（预充）-实际成交金额（元）" align="center" prop="prefilledEv71ActualTransactionAmount" />
      <el-table-column label="EV71（西林）-预计成交数量" align="center" prop="penicillinEv71EstimatedTransactionQuantity" />
      <el-table-column label="EV71（西林）-预计成交金额（元）" align="center" prop="penicillinEv71EstimatedTransactionAmount" />
      <el-table-column label="EV71（西林）-实际成交数量" align="center" prop="penicillinEv71ActualTransactionQuantity" />
      <el-table-column label="EV71（西林）-实际成交金额（元）" align="center" prop="penicillinEv71ActualTransactionAmount" />
      <el-table-column label="破伤风疫苗-预计成交数量" align="center" prop="tetanusVaccineEstimatedTransactionQuantity" />
      <el-table-column label="破伤风疫苗-预计成交金额（元）" align="center" prop="tetanusVaccineEstimatedTransactionAmount" />
      <el-table-column label="破伤风疫苗-实际成交数量" align="center" prop="tetanusVaccineActualTransactionQuantity" />
      <el-table-column label="破伤风疫苗-实际成交金额（元）" align="center" prop="tetanusVaccineActualTransactionAmount" />
      <el-table-column label="狂犬疫苗-预计成交数量" align="center" prop="rabiesVaccineEstimatedTransactionQuantity" />
      <el-table-column label="狂犬疫苗-预计成交金额（元）" align="center" prop="rabiesVaccineEstimatedTransactionAmount" />
      <el-table-column label="狂犬疫苗-实际成交数量" align="center" prop="rabiesVaccineActualTransactionQuantity" />
      <el-table-column label="狂犬疫苗-实际成交金额（元）" align="center" prop="rabiesVaccineActualTransactionAmount" />
      <el-table-column label="流脑四价-预计成交数量" align="center" prop="quadrivalentMeningococcalEstimatedTransactionQuantity" />
      <el-table-column label="流脑四价-预计成交金额（元）" align="center" prop="quadrivalentMeningococcalEstimatedTransactionAmount" />
      <el-table-column label="流脑四价-实际成交数量" align="center" prop="quadrivalentMeningococcalActualTransactionQuantity" />
      <el-table-column label="流脑四价-实际成交金额（元）" align="center" prop="quadrivalentMeningococcalActualTransactionAmount" />
      <el-table-column label="实际成交日期" align="center" prop="actualTransactionDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.actualTransactionDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="预计回款金额（元）" align="center" prop="expectedCollectionAmount" />
      <el-table-column label="实际回款金额（元）" align="center" prop="actualCollectionAmount" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click.stop="handleUpdate(scope.row)"
            v-hasPermi="['zxcrm:businessOpportunity:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click.stop="handleDelete(scope.row)"
            v-hasPermi="['zxcrm:businessOpportunity:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改商机对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" label-position="top" :model="form" :rules="rules" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所属客户" prop="customerId">
              <el-select v-model="form.customerId" placeholder="请选择所属客户" class="w100" @change="handleCustomerChange">
                <el-option
                  v-for="item in customerList"
                  :key="item.id"
                  :label="item.companyName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="contactIds">
              <el-select v-model="contactList" placeholder="请选择联系人" multiple class="w100" @change="handleContactChange" :disabled="form.id">
                <el-option
                  v-for="item in contactListByCustomerIdList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="销售流程" prop="salesProcess">
              <el-select v-model="form.salesProcess" placeholder="请选择销售流程" class="w100" :disabled="form.id">
                <el-option
                  v-for="dict in dict.type.zxcrm_sales_process"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="商机名称(本人-客户名称-产品名字-日期)" prop="bussinessOpportunity">
              <el-input v-model="form.bussinessOpportunity" placeholder="请输入商机名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商机类型" prop="businessOppportunityType">
              <el-select v-model="businessOppportunityTypeList" multiple placeholder="请选择商机类型" class="w100" @change="handleBusinessOppportunityType">
                <el-option
                  v-for="dict in dict.type.zxcrm_business_opportunity_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="流感（三价）-预计成交数量" prop="trivalentInfluenzaEstimatedTransactionQuantity" v-if="businessOppportunityTypeList.includes('1')">
              <el-input v-model="form.trivalentInfluenzaEstimatedTransactionQuantity" v-number-format placeholder="请输入流感" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="流感（三价）-预计成交金额（元）" prop="trivalentInfluenzaEstimatedTransactionAmount"  v-if="businessOppportunityTypeList.includes('1')">
              <el-input v-model="form.trivalentInfluenzaEstimatedTransactionAmount" v-number-format placeholder="请输入流感" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="流感（三价）-实际成交数量" prop="trivalentInfluenzaActualTransactionQuantity"  v-if="businessOppportunityTypeList.includes('1')">
              <el-input v-model="form.trivalentInfluenzaActualTransactionQuantity" v-number-format placeholder="请输入流感" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="流感（三价）-实际成交金额（元）" prop="trivalentInfluenzaActualTransactionAmount"  v-if="businessOppportunityTypeList.includes('1')">
              <el-input v-model="form.trivalentInfluenzaActualTransactionAmount" v-number-format placeholder="请输入流感" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="流感（四价）-预计成交数量" prop="quadrivalentInfluenzaEstimatedTransactionQuantity" v-if="businessOppportunityTypeList.includes('2')">
              <el-input v-model="form.quadrivalentInfluenzaEstimatedTransactionQuantity" v-number-format placeholder="请输入流感" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="流感（四价）-预计成交金额（元）" prop="quadrivalentInfluenzaEstimatedTransactionAmount" v-if="businessOppportunityTypeList.includes('2')">
              <el-input v-model="form.quadrivalentInfluenzaEstimatedTransactionAmount" v-number-format placeholder="请输入流感" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="流感（四价）-实际成交数量" prop="quadrivalentInfluenzaActualTransactionQuantity" v-if="businessOppportunityTypeList.includes('2')">
              <el-input v-model="form.quadrivalentInfluenzaActualTransactionQuantity" v-number-format placeholder="请输入流感" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="流感（四价）-实际成交金额（元）" prop="quadrivalentInfluenzaActualTransactionAmount" v-if="businessOppportunityTypeList.includes('2')">
              <el-input v-model="form.quadrivalentInfluenzaActualTransactionAmount" v-number-format placeholder="请输入流感" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="水痘（预充）-预计成交数量" prop="prefilledChickenpoxEstimatedTransactionQuantity"  v-if="businessOppportunityTypeList.includes('3')">
              <el-input v-model="form.prefilledChickenpoxEstimatedTransactionQuantity" v-number-format placeholder="请输入水痘" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="水痘（预充）-预计成交金额（元）" prop="prefilledChickenpoxEstimatedTransactionAmount"  v-if="businessOppportunityTypeList.includes('3')">
              <el-input v-model="form.prefilledChickenpoxEstimatedTransactionAmount" v-number-format placeholder="请输入水痘" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="水痘（预充）-实际成交数量" prop="prefilledChickenpoxActualTransactionQuantity"  v-if="businessOppportunityTypeList.includes('3')">
              <el-input v-model="form.prefilledChickenpoxActualTransactionQuantity" v-number-format placeholder="请输入水痘" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="水痘（预充）-实际成交金额（元）" prop="prefilledChickenpoxActualTransactionAmount"  v-if="businessOppportunityTypeList.includes('3')">
              <el-input v-model="form.prefilledChickenpoxActualTransactionAmount" v-number-format placeholder="请输入水痘" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="水痘（西林）-预计成交数量" prop="penicillinChickenpoxEstimatedTransactionQuantity"  v-if="businessOppportunityTypeList.includes('4')">
              <el-input v-model="form.penicillinChickenpoxEstimatedTransactionQuantity" v-number-format placeholder="请输入水痘" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="水痘（西林）-预计成交金额（元）" prop="penicillinChickenpoxEstimatedTransactionAmount" v-if="businessOppportunityTypeList.includes('4')">
              <el-input v-model="form.penicillinChickenpoxEstimatedTransactionAmount" v-number-format placeholder="请输入水痘" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="水痘（西林）-实际成交数量" prop="penicillinChickenpoxActualTransactionQuantity" v-if="businessOppportunityTypeList.includes('4')">
              <el-input v-model="form.penicillinChickenpoxActualTransactionQuantity" v-number-format placeholder="请输入水痘" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="水痘（西林）-实际成交金额（元）" prop="penicillinChickenpoxActualTransactionAmount" v-if="businessOppportunityTypeList.includes('4')">
              <el-input v-model="form.penicillinChickenpoxActualTransactionAmount" v-number-format placeholder="请输入水痘" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="肺炎（预充）-预计成交数量" prop="prefilledPneumoniaEstimatedTransactionQuantity" v-if="businessOppportunityTypeList.includes('5')">
              <el-input v-model="form.prefilledPneumoniaEstimatedTransactionQuantity" v-number-format placeholder="请输入肺炎" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="肺炎（预充）-预计成交金额（元）" prop="prefilledPneumoniaEstimatedTransactionAmount" v-if="businessOppportunityTypeList.includes('5')">
              <el-input v-model="form.prefilledPneumoniaEstimatedTransactionAmount" v-number-format placeholder="请输入肺炎" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="肺炎（预充）-实际成交数量" prop="prefilledPneumoniaActualTransactionQuantity" v-if="businessOppportunityTypeList.includes('5')">
              <el-input v-model="form.prefilledPneumoniaActualTransactionQuantity" v-number-format placeholder="请输入肺炎" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="肺炎（预充）-实际成交金额（元）" prop="prefilledPneumoniaActualTransactionAmount" v-if="businessOppportunityTypeList.includes('5')">
              <el-input v-model="form.prefilledPneumoniaActualTransactionAmount" v-number-format placeholder="请输入肺炎" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="肺炎（西林）-预计成交数量" prop="penicillinPneumoniaEstimatedTransactionQuantity" v-if="businessOppportunityTypeList.includes('6')">
              <el-input v-model="form.penicillinPneumoniaEstimatedTransactionQuantity" v-number-format placeholder="请输入肺炎" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="肺炎（西林）-预计成交金额（元）" prop="penicillinPneumoniaEstimatedTransactionAmount" v-if="businessOppportunityTypeList.includes('6')">
              <el-input v-model="form.penicillinPneumoniaEstimatedTransactionAmount" v-number-format placeholder="请输入肺炎" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="肺炎（西林）-实际成交数量" prop="penicillinPneumoniaActualTransactionQuantity" v-if="businessOppportunityTypeList.includes('6')">
              <el-input v-model="form.penicillinPneumoniaActualTransactionQuantity" v-number-format placeholder="请输入肺炎" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="肺炎（西林）-实际成交金额（元）" prop="penicillinPneumoniaActualTransactionAmount" v-if="businessOppportunityTypeList.includes('6')">
              <el-input v-model="form.penicillinPneumoniaActualTransactionAmount" v-number-format placeholder="请输入肺炎" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="EV71（预充）-预计成交数量" prop="prefilledEv71EstimatedTransactionQuantity" v-if="businessOppportunityTypeList.includes('7')">
              <el-input v-model="form.prefilledEv71EstimatedTransactionQuantity" v-number-format placeholder="请输入EV71" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="EV71（预充）-预计成交金额（元）" prop="prefilledEv71EstimatedTransactionAmount" v-if="businessOppportunityTypeList.includes('7')">
              <el-input v-model="form.prefilledEv71EstimatedTransactionAmount" v-number-format placeholder="请输入EV71" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="EV71（预充）-实际成交数量" prop="prefilledEv71ActualTransactionQuantity" v-if="businessOppportunityTypeList.includes('7')">
              <el-input v-model="form.prefilledEv71ActualTransactionQuantity" v-number-format placeholder="请输入EV71" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="EV71（预充）-实际成交金额（元）" prop="prefilledEv71ActualTransactionAmount" v-if="businessOppportunityTypeList.includes('7')">
              <el-input v-model="form.prefilledEv71ActualTransactionAmount" v-number-format placeholder="请输入EV71" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="EV71（西林）-预计成交数量" prop="penicillinEv71EstimatedTransactionQuantity" v-if="businessOppportunityTypeList.includes('8')">
              <el-input v-model="form.penicillinEv71EstimatedTransactionQuantity" v-number-format placeholder="请输入EV71" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="EV71（西林）-预计成交金额（元）" prop="penicillinEv71EstimatedTransactionAmount" v-if="businessOppportunityTypeList.includes('8')">
              <el-input v-model="form.penicillinEv71EstimatedTransactionAmount" v-number-format placeholder="请输入EV71" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="EV71（西林）-实际成交数量" prop="penicillinEv71ActualTransactionQuantity" v-if="businessOppportunityTypeList.includes('8')">
              <el-input v-model="form.penicillinEv71ActualTransactionQuantity" v-number-format placeholder="请输入EV71" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="EV71（西林）-实际成交金额（元）" prop="penicillinEv71ActualTransactionAmount" v-if="businessOppportunityTypeList.includes('8')">
              <el-input v-model="form.penicillinEv71ActualTransactionAmount" v-number-format placeholder="请输入EV71" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="破伤风疫苗-预计成交数量" prop="tetanusVaccineEstimatedTransactionQuantity" v-if="businessOppportunityTypeList.includes('9')">
              <el-input v-model="form.tetanusVaccineEstimatedTransactionQuantity" v-number-format placeholder="请输入破伤风疫苗-预计成交数量" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="破伤风疫苗-预计成交金额（元）" prop="tetanusVaccineEstimatedTransactionAmount" v-if="businessOppportunityTypeList.includes('9')">
              <el-input v-model="form.tetanusVaccineEstimatedTransactionAmount" v-number-format placeholder="请输入破伤风疫苗-预计成交金额" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="破伤风疫苗-实际成交数量" prop="tetanusVaccineActualTransactionQuantity" v-if="businessOppportunityTypeList.includes('9')">
              <el-input v-model="form.tetanusVaccineActualTransactionQuantity" v-number-format placeholder="请输入破伤风疫苗-实际成交数量" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="破伤风疫苗-实际成交金额（元）" prop="tetanusVaccineActualTransactionAmount" v-if="businessOppportunityTypeList.includes('9')">
              <el-input v-model="form.tetanusVaccineActualTransactionAmount" v-number-format placeholder="请输入破伤风疫苗-实际成交金额" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="狂犬疫苗-预计成交数量" prop="rabiesVaccineEstimatedTransactionQuantity" v-if="businessOppportunityTypeList.includes('10')">
              <el-input v-model="form.rabiesVaccineEstimatedTransactionQuantity" v-number-format placeholder="请输入狂犬疫苗-预计成交数量" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="狂犬疫苗-预计成交金额（元）" prop="rabiesVaccineEstimatedTransactionAmount" v-if="businessOppportunityTypeList.includes('10')">
              <el-input v-model="form.rabiesVaccineEstimatedTransactionAmount" v-number-format placeholder="请输入狂犬疫苗-预计成交金额" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="狂犬疫苗-实际成交数量" prop="rabiesVaccineActualTransactionQuantity" v-if="businessOppportunityTypeList.includes('10')">
              <el-input v-model="form.rabiesVaccineActualTransactionQuantity" v-number-format placeholder="请输入狂犬疫苗-实际成交数量" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="狂犬疫苗-实际成交金额（元）" prop="rabiesVaccineActualTransactionAmount" v-if="businessOppportunityTypeList.includes('10')">
              <el-input v-model="form.rabiesVaccineActualTransactionAmount" v-number-format placeholder="请输入狂犬疫苗-实际成交金额" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="流脑四价-预计成交数量" prop="quadrivalentMeningococcalEstimatedTransactionQuantity" v-if="businessOppportunityTypeList.includes('11')">
              <el-input v-model="form.quadrivalentMeningococcalEstimatedTransactionQuantity" v-number-format placeholder="请输入流脑四价-预计成交数量" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="流脑四价-预计成交金额（元）" prop="quadrivalentMeningococcalEstimatedTransactionAmount" v-if="businessOppportunityTypeList.includes('11')">
              <el-input v-model="form.quadrivalentMeningococcalEstimatedTransactionAmount" v-number-format placeholder="请输入流脑四价-预计成交金额" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="流脑四价-实际成交数量" prop="quadrivalentMeningococcalActualTransactionQuantity" v-if="businessOppportunityTypeList.includes('11')">
              <el-input v-model="form.quadrivalentMeningococcalActualTransactionQuantity" v-number-format placeholder="请输入流脑四价-实际成交数量" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="流脑四价-实际成交金额（元）" prop="quadrivalentMeningococcalActualTransactionAmount" v-if="businessOppportunityTypeList.includes('11')">
              <el-input v-model="form.quadrivalentMeningococcalActualTransactionAmount" v-number-format placeholder="请输入流脑四价-实际成交金额" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="实际成交日期" prop="actualTransactionDate">
              <el-date-picker clearable style="width: 100%;"
                v-model="form.actualTransactionDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择实际成交日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预计回款金额（元）" prop="expectedCollectionAmount">
              <el-input v-model="form.expectedCollectionAmount" v-number-format placeholder="请输入预计回款金额" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="实际回款金额（元）" prop="actualCollectionAmount">
              <el-input v-model="form.actualCollectionAmount" v-number-format placeholder="请输入实际回款金额" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row >
          <el-col :span="12" style="background-color: gainsboro;height: 30px;line-height: 30px;">
            <span>产品信息</span>
          </el-col>
          <el-col :span="12" style="background-color: gainsboro;height: 30px;line-height: 30px;text-align: right;">
            <el-button icon="el-icon-plus" type="text" @click="handleProduct">添加产品</el-button>
          </el-col>
      </el-row>
      <div style="height: 10px;"></div>
      <!-- 产品表格-->
      <el-table
        :data="form.productList || []"
      >
        <el-table-column label="产品名称" align="center" prop="name" show-overflow-tooltip min-width="100px" />
        <el-table-column label="价格" align="center" prop="price" />
        <el-table-column label="售价" align="center" prop="salePrice" min-width="100px">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.salePrice" :precision="2" @change="(value) => handleSalePriceChange(value,scope.row)" size="small" ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="数量" align="center" prop="quantity" min-width="100px">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.quantity" @change="(value) => handleQuantityChange(value,scope.row)" size="small" ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="合计" align="center" prop="totalPrice" />
        <el-table-column label="操作" align="center" prop="price" >
          <template slot-scope="scope">
            <el-button type="text" @click="handleProductDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="space-between">
        <el-col :span="4">已选中<span style="color: blue;margin: 0 10px;">{{form.productList.length}}</span>种产品</el-col>
        <el-col :span="4">总金额:<span style="color: blue;margin: 0 10px;">{{form.productList.reduce((total,obj) => total + (obj['totalPrice'] || 0),0)}}</span>元</el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 产品选择弹框-->
    <el-dialog :title="productParam.title" :visible.sync="productParam.open" width="1000px" append-to-body>
      <el-table
        ref="productMultipleTable"
        @select="handleProductSelectionChange"
        @select-all="handleSelectAll"
        :row-key="getRowKey"
        v-loading="productParam.loading"
        :data="productList"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="产品名称" align="center" prop="name" min-width="300px" />
        <el-table-column label="编号" align="center" prop="identifier" />
        <el-table-column label="价格" align="center" prop="price" />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitProductSelection">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listBusinessOpportunity, getBusinessOpportunity, delBusinessOpportunity, addBusinessOpportunity, updateBusinessOpportunity } from "@/api/zxcrm/businessOpportunity"
import { listAllCustomer } from "@/api/zxcrm/customer"
import { getContactListByCustomerId } from "@/api/zxcrm/contact"
import { listAllProduct } from "@/api/zxcrm/product"
export default {
  name: "BusinessOpportunity",
  dicts: ['sys_normal_disable','zxcrm_business_opportunity_type','zxcrm_sales_process','zxcrm_business_opportunity_stage','zxcrm_permission_range','zxcrm_attention'],
  data() {
    return {
      stageList:[],
      dateRange: [], // 存储选择的日期范围
      pickerOptions: {
       disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          // 今天
          {
            text: '今天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              picker.$emit('pick', [start, end]);
            }
          },
          // 昨天
          {
            text: '昨天',
            onClick(picker) {
              const end = new Date();
              end.setDate(end.getDate() - 1);
              const start = new Date(end);
              picker.$emit('pick', [start, end]);
            }
          },
          // 最近一周（过去7天）
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setDate(start.getDate() - 6); // 含今天共7天
              picker.$emit('pick', [start, end]);
            }
          },
          // 最近一个月（过去30天）
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setDate(start.getDate() - 29); // 含今天共30天
              picker.$emit('pick', [start, end]);
            }
          },
          // 最近三个月（过去90天）
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setDate(start.getDate() - 89); // 含今天共90天
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
      rowSelectFlag: false, // 防止selection-change事件干扰
      selectedIds: [],
      productSelectList:[],
      contactList:[],
      contactListByCustomerIdList:[],
      customerList:[],
      businessOppportunityTypeList:[],
      gutter:20,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 商机表格数据
      businessOpportunityList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      productList:[],
      productParam:{
         open: false,
         title: "",
         loading: false,
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        trivalentInfluenzaEstimatedTransactionAmount: null,
        trivalentInfluenzaActualTransactionQuantity: null,
        trivalentInfluenzaActualTransactionAmount: null,
        quadrivalentInfluenzaEstimatedTransactionQuantity: null,
        quadrivalentInfluenzaEstimatedTransactionAmount: null,
        quadrivalentInfluenzaActualTransactionQuantity: null,
        quadrivalentInfluenzaActualTransactionAmount: null,
        prefilledChickenpoxEstimatedTransactionQuantity: null,
        prefilledChickenpoxEstimatedTransactionAmount: null,
        prefilledChickenpoxActualTransactionQuantity: null,
        prefilledChickenpoxActualTransactionAmount: null,
        penicillinChickenpoxEstimatedTransactionQuantity: null,
        penicillinChickenpoxEstimatedTransactionAmount: null,
        penicillinChickenpoxActualTransactionQuantity: null,
        penicillinChickenpoxActualTransactionAmount: null,
        prefilledPneumoniaEstimatedTransactionQuantity: null,
        prefilledPneumoniaEstimatedTransactionAmount: null,
        prefilledPneumoniaActualTransactionQuantity: null,
        prefilledPneumoniaActualTransactionAmount: null,
        penicillinPneumoniaEstimatedTransactionQuantity: null,
      },
      // 表单参数
      form: {
        productList:[]
      },
      // 表单校验
      rules: {
        customerId:[
          {required:true,message:"所属客户是必填项",trigger:'blur'}
        ],
        salesProcess:[
          {required:true,message:"销售流程是必填项",trigger:'blur'}
        ],
        bussinessOpportunity:[
          {required:true,message:"商机名称(本人-客户名称-产品名字-日期)是必填项",trigger:'blur'}
        ],
        businessOppportunityType:[
          {required:true,message:"商机类型是必填项",trigger:'blur'}
        ],
        trivalentInfluenzaEstimatedTransactionQuantity:[
          {required:true,message:"流感（三价）-预计成交数量是必填项",trigger:'blur'}
        ],
        trivalentInfluenzaEstimatedTransactionAmount:[
          {required:true,message:"流感（三价）-预计成交金额（元）是必填项",trigger:'blur'}
        ],
        quadrivalentInfluenzaEstimatedTransactionQuantity:[
          {required:true,message:"流感（四价）-预计成交数量是必填项",trigger:'blur'}
        ],
        quadrivalentInfluenzaEstimatedTransactionAmount:[
          {required:true,message:"流感（四价）-预计成交金额（元）是必填项",trigger:'blur'}
        ],
        prefilledChickenpoxEstimatedTransactionQuantity:[
          {required:true,message:"水痘（预充）-预计成交数量是必填项",trigger:'blur'}
        ],
        prefilledChickenpoxEstimatedTransactionAmount:[
          {required:true,message:"水痘（预充）-预计成交金额（元）是必填项",trigger:'blur'}
        ],
        penicillinChickenpoxEstimatedTransactionQuantity:[
          {required:true,message:"水痘（西林）-预计成交数量是必填项",trigger:'blur'}
        ],
        penicillinChickenpoxEstimatedTransactionAmount:[
          {required:true,message:"水痘（西林）-预计成交金额（元）是必填项",trigger:'blur'}
        ],
        prefilledPneumoniaEstimatedTransactionQuantity:[
          {required:true,message:"肺炎（预充）-预计成交数量是必填项",trigger:'blur'}
        ],
        prefilledPneumoniaEstimatedTransactionAmount:[
          {required:true,message:"肺炎（预充）-预计成交金额（元）是必填项",trigger:'blur'}
        ],
        penicillinPneumoniaEstimatedTransactionQuantity:[
          {required:true,message:"肺炎（西林）-预计成交数量是必填项",trigger:'blur'}
        ],
        penicillinPneumoniaEstimatedTransactionAmount:[
          {required:true,message:"肺炎（西林）-预计成交金额（元）是必填项",trigger:'blur'}
        ],
        prefilledEv71EstimatedTransactionQuantity:[
          {required:true,message:"EV71（预充）-预计成交数量是必填项",trigger:'blur'}
        ],
        prefilledEv71EstimatedTransactionAmount:[
          {required:true,message:"EV71（预充）-预计成交金额（元）是必填项",trigger:'blur'}
        ],
        penicillinEv71EstimatedTransactionQuantity:[
          {required:true,message:"EV71（西林）-预计成交数量是必填项",trigger:'blur'}
        ],
        penicillinEv71EstimatedTransactionAmount:[
          {required:true,message:"EV71（西林）-预计成交金额（元）是必填项",trigger:'blur'}
        ],
        tetanusVaccineEstimatedTransactionQuantity:[
          {required:true,message:"破伤风疫苗-预计成交数量是必填项",trigger:'blur'}
        ],
        tetanusVaccineEstimatedTransactionAmount:[
          {required:true,message:"破伤风疫苗-预计成交金额（元）是必填项",trigger:'blur'}
        ],
        rabiesVaccineEstimatedTransactionQuantity:[
          {required:true,message:"狂犬疫苗-预计成交数量是必填项",trigger:'blur'}
        ],
        rabiesVaccineEstimatedTransactionAmount:[
          {required:true,message:"狂犬疫苗-预计成交金额（元）是必填项",trigger:'blur'}
        ],
        quadrivalentMeningococcalEstimatedTransactionQuantity:[
          {required:true,message:"流脑四价-预计成交数量是必填项",trigger:'blur'}
        ],
        quadrivalentMeningococcalEstimatedTransactionAmount:[
          {required:true,message:"流脑四价-预计成交金额（元）是必填项",trigger:'blur'}
        ],
      }
    }
  },
  created() {
    this.getList()
    this.getCustomerList()
  },
  mounted() {
     // 模拟数据加载后设置选中状态
    this.setCheckedRows();
  },
  methods: {
    handleRowClick(row, column, event){
      this.$router.push({ path: "/zxcrm/businessOpportUnityInfo",query: {id: row.id} });
    },
    // 处理阶段变化
    handleStageChange(e){
      this.queryParams.stage = this.stageList.join(',')
    },
    // 创建时间改变
    hanleCreateChange(e){
      console.log(e);
    },
    // 处理联系人改变
    handleContactChange(e){
      this.form.contactIds = e.join(',')
    },
    // 处理产品删除
    handleProductDel(row){
      this.removeSelection(row.productId)
      this.form.productList.splice(row,1)
    },
    // 处理售价变化
    handleQuantityChange(value,row){
      row.totalPrice = Number(value) * Number(row.salePrice)
    },
    // 处理售价变化
    handleSalePriceChange(value,row){
      row.totalPrice = Number(value) * Number(row.quantity)
    },
    //产品选择
    submitProductSelection(){
      this.productParam.open = false
    },
    //单选事件
    handleProductSelectionChange(selection, row){
       if (this.rowSelectFlag) {
          this.rowSelectFlag = false;
          return;
        }
        const isSelected = selection.some(s => s.productId === row.productId);
        if (isSelected) {
          this.addProductInfo(selection, row)
          this.addSelection(row);
        } else {
          this.removeProductInfo(selection, row);
          this.removeSelection(row.productId);
        }
    },
  // 全选事件
    handleSelectAll(selection) {
      const currentPageIds = this.productList.map(item => item.productId);

      if (selection.length > 0) {
        // 添加当前页未选中的项
        selection.forEach(item => {
          if (!this.selectedIds.includes(item.productId)) {
            this.selectedIds.push(item.productId);
          }
        });
      } else {
        // 移除当前页所有项
        currentPageIds.forEach(productId => {
          this.removeSelection(productId);
        });
      }
    },
      // 添加选中项
      addSelection(row) {
        if (!this.selectedIds.includes(row.productId)) {
          this.selectedIds.push(row.productId);
          this.productSelectList.push(row)
        }
      },
      // 添加选中项
      addSelectionForProdrctList(productList) {
        // for(const row of productList){
        //   console.log("-----");
        //   if (!this.selectedIds.includes(row.productId)) {
        //     this.selectedIds.push(row.productId);
        //     const currentRow = this.productList.find(x => x.productId == row.productId)
        //     this.productSelectList.push(currentRow)
        //     // 若当前页存在该项，更新UI状态
        //     if (currentRow) {
        //       this.$refs.productMultipleTable.toggleRowSelection(currentRow, true);
        //     }
        //   }
        // }
      },
      // 添加产品信息
      addProductInfo(selection, row){
        if(!this.selectedIds.includes(row.productId)){
          this.$set(row,"salePrice",Number(row.price))
          this.$set(row,"quantity",1)
          this.$set(row,"totalPrice",Number(row.price))
          this.form.productList.push(row)
        }
      },
      // 移除选中项
      removeSelection(productId) {
        const index = this.selectedIds.indexOf(productId);
        if (index > -1) {
          this.selectedIds.splice(index, 1);
          // 若当前页存在该项，更新UI状态
          const currentRow = this.productSelectList.find(row => row.productId == productId);
          if (currentRow) {
            this.$refs.productMultipleTable.toggleRowSelection(currentRow, false);
          }
        }
      },
      // 移除产品信息
      removeProductInfo(selection, row){
        const index = this.selectedIds.indexOf(row.productId)
        if(index > -1){
          // 删除产品
          this.form.productList = this.form.productList.filter(item => item.productId != row.productId);
        }
      },
     /** 表格数据加载完成后，设置选中状态 */
    setCheckedRows() {
       // 关键：数据渲染后回显选中状态
       this.$nextTick(this.updateSelection);
    },
    // 更新选中状态（核心回显逻辑）
    updateSelection() {
      this.$refs.productMultipleTable.clearSelection();
      this.productSelectList.forEach(row => {
        if (this.selectedIds.includes(row.productId)) {
          this.rowSelectFlag = true; // 加锁
          this.$refs.productMultipleTable.toggleRowSelection(row, true);
        }
      });
    },
    /** 获取行的唯一标识 */
    getRowKey(row){
      return row.productId
    },
     /** 处理产品弹框 */
    handleProduct(){
      this.productParam.open = true
      this.productParam.title = "添加产品"
      this.addSelectionForProdrctList(this.form.productList)
    },
    getAllProduct(){
      listAllProduct().then(res=>{
        this.productList = res.data
      })
    },
    getContactListByCustomerId(customerId){
      getContactListByCustomerId(customerId).then(res=>{
        this.contactListByCustomerIdList = res.data
      })
    },
    /** 处理客户改变 */
    handleCustomerChange(e){
      this.getContactListByCustomerId(e)
    },
    /** 客户列表 */
    getCustomerList(){
      listAllCustomer().then(res=>{
        this.customerList = res.data
      })
    },
    /** 处理商机类型 */
    handleBusinessOppportunityType(e){
      this.form.businessOppportunityType = e.join(",")
    },
    /** 查询商机列表 */
    getList() {
      this.loading = true
      listBusinessOpportunity(this.queryParams).then(response => {
        this.businessOpportunityList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.contactList = []
      this.stageList = []
      this.form = {
        id: null,
        customerId: null,
        salesProcess: null,
        bussinessOpportunity: null,
        businessOppportunityType: null,
        trivalentInfluenzaEstimatedTransactionQuantity: null,
        trivalentInfluenzaEstimatedTransactionAmount: null,
        trivalentInfluenzaActualTransactionQuantity: null,
        trivalentInfluenzaActualTransactionAmount: null,
        quadrivalentInfluenzaEstimatedTransactionQuantity: null,
        quadrivalentInfluenzaEstimatedTransactionAmount: null,
        quadrivalentInfluenzaActualTransactionQuantity: null,
        quadrivalentInfluenzaActualTransactionAmount: null,
        prefilledChickenpoxEstimatedTransactionQuantity: null,
        prefilledChickenpoxEstimatedTransactionAmount: null,
        prefilledChickenpoxActualTransactionQuantity: null,
        prefilledChickenpoxActualTransactionAmount: null,
        penicillinChickenpoxEstimatedTransactionQuantity: null,
        penicillinChickenpoxEstimatedTransactionAmount: null,
        penicillinChickenpoxActualTransactionQuantity: null,
        penicillinChickenpoxActualTransactionAmount: null,
        prefilledPneumoniaEstimatedTransactionQuantity: null,
        prefilledPneumoniaEstimatedTransactionAmount: null,
        prefilledPneumoniaActualTransactionQuantity: null,
        prefilledPneumoniaActualTransactionAmount: null,
        penicillinPneumoniaEstimatedTransactionQuantity: null,
        penicillinPneumoniaEstimatedTransactionAmount: null,
        penicillinPneumoniaActualTransactionQuantity: null,
        penicillinPneumoniaActualTransactionAmount: null,
        prefilledEv71EstimatedTransactionQuantity: null,
        prefilledEv71EstimatedTransactionAmount: null,
        prefilledEv71ActualTransactionQuantity: null,
        prefilledEv71ActualTransactionAmount: null,
        penicillinEv71EstimatedTransactionQuantity: null,
        penicillinEv71EstimatedTransactionAmount: null,
        penicillinEv71ActualTransactionQuantity: null,
        penicillinEv71ActualTransactionAmount: null,
        tetanusVaccineEstimatedTransactionQuantity: null,
        tetanusVaccineEstimatedTransactionAmount: null,
        tetanusVaccineActualTransactionQuantity: null,
        tetanusVaccineActualTransactionAmount: null,
        rabiesVaccineEstimatedTransactionQuantity: null,
        rabiesVaccineEstimatedTransactionAmount: null,
        rabiesVaccineActualTransactionQuantity: null,
        rabiesVaccineActualTransactionAmount: null,
        quadrivalentMeningococcalEstimatedTransactionQuantity: null,
        quadrivalentMeningococcalEstimatedTransactionAmount: null,
        quadrivalentMeningococcalActualTransactionQuantity: null,
        quadrivalentMeningococcalActualTransactionAmount: null,
        actualTransactionDate: null,
        expectedCollectionAmount: null,
        actualCollectionAmount: null,
        remark: null,
        status: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        contactIds:null,
        productList:[]
      }
      this.resetForm("form")
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.getAllProduct()
      this.selectedIds = []
      this.rowSelectFlag = false
      this.open = true
      this.title = "添加商机"
      // 清空产品选择
      this.$refs.productMultipleTable.clearSelection();

    },
    /** 修改按钮操作 */
     handleUpdate(row) {
      this.reset()
      this.getAllProduct()
      const id = row.id || this.ids
        getBusinessOpportunity(id).then(response => {
        this.form = response.data
        this.getContactListByCustomerId(this.form.customerId)
        this.businessOppportunityTypeList = this.form.businessOppportunityType.split(',')
        if(this.form.contactIds){
            this.contactList = this.form.contactIds.split(",").map(x=>parseInt(x,10))
        }
        this.open = true
        this.title = "修改商机"
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateBusinessOpportunity(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.open = false
              this.getList()
            })
          } else {
            addBusinessOpportunity(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除商机编号为"' + ids + '"的数据项？').then(function() {
        return delBusinessOpportunity(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("删除成功")
      }).catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('zxcrm/businessOpportunity/export', {
        ...this.queryParams
      }, `businessOpportunity_${new Date().getTime()}.xlsx`)
    }
  }
}
</script>
